<template>
  <div id="" name="">
    <ul>
      <li v-for="(item, i) in imgs" :key="i" :class=" current ===i? 'active' : '' " @click="choseType(item,i)">
        <img :src="item" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
import img1 from '@/assets/img1.jpg'
import img2 from '@/assets/img2.jpg'
import img3 from '@/assets/img3.jpg'
import img4 from '@/assets/img4.jpg'
import img5 from '@/assets/img5.jpg'

export default {
  name: '',
  props:['num'],//从其他区域传过来的值
  data() {
    return {
      imgs: [img1, img2, img3, img4, img5,],
      current:-1
    };
  },
  // 子组件转换
  components: {},
  // 数据引入
  mounted() {
  },
  created() {
  },
  //点击函数事件
  methods: {
    choseType(item,i){
      this.current = i
      this.$emit('getimg' ,item)//准备传值
    }

},
  //计算事件
  computed: {},
  //数据监听
  watch: {
    num(){
      this.current = this.num()
    }
  },
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  justify-content: space-around;

  li {
    width: 60px;
    height: 60px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.active {
  border: 3px solid #e23;
}
</style>
